import React, { useEffect, useState, useMemo } from 'react';
import {useHistory} from "react-router-dom";
import moment from 'moment';
import {forunit} from "./../utils/common"
const imgrul = "https://iotapi.sziton.com/afile/J4GFRSTHQ4/"
const apirul = "https://iotapi.sziton.com/api/appapi/"
const thirdUserNo = "para_user1"
export function DbfxPage(props) {
	const [sdkReady, setSdkReady] = useState(false);
	useEffect(() =>  {
		h5PanelSdk.sdkReady().then(() =>  setSdkReady(true));
	}, []);
	const history = useHistory()
	const [dbinfols,setdbinfolist] = useState([]);
	var dbinfolist = []
	const dblist = history.location.state || []
	useEffect(() => {
		dblist.map(
			function(item ,index){
				getThirdUserDataBYId(item)
			}
		)
		function getThirdUserDataBYId(Uid){
			var request = require('superAgent')
			request
			.post(apirul+'getThirdUserDataBYId')
			.send({"id":Uid})
			.end(function(err, res){
			  var JkcardUdata
			  if(res.body.code == 1){
				JkcardUdata = res.body.data.data
				console.log('getThirdUserDataBYId',JkcardUdata)
				dbinfolist.push(JkcardUdata)
				setdbinfolist(
					dbinfols.push(JkcardUdata)
				)
			  }else{
				console.log('服务器'+res)
			  }
			})
		}
	  }, [])
	return !sdkReady ? <div > loading...</div >  : (
		<div className="dbfxPage pd pdbfoot" style={{marginBottom:"60px"}}>
			<div className="navtit">对比分析</div>
			<div className="lftable tittext fl pdb">
				<Dbinfolist dbinfolist={dbinfols}/>
			</div>
		</div>
	)
}
function Dbinfolist(props){
	const dbinfolist = props.dbinfolist
	const [dbinfols,setdbinfolist] = useState(dbinfolist);
	useEffect(() => {
		console.log(dbinfolist)
		// setdbinfolist(
		// 	dbinfolist
		// )
	}, [])
	let tzData = [
		{ nameStr: "weight", text: "体重", unit: "(KG)", levelNum: "weight_u", levelList:"listFatRange", levelRange:"resFatRange"},
		{ nameStr: "fatRate", text: "脂肪率", unit: "(%)", levelNum: "fatRate_u", levelList:"listFatRange", levelRange:"resFatRange"},
		{ nameStr: "fatKg", text: "脂肪量", unit: "", levelNum: "fatKg_u" , levelList:"listFatRange1", levelRange:"resFatRange1",},
		{ nameStr: "muscleRate", text: "肌肉率", unit: "(%)", levelNum: "muscleRate_u" , levelList:"listMuscleRange", levelRange:"resMuscleRange",},
		{ nameStr: "muscleKg", text: "肌肉量", unit: "", levelNum: "muscleKg_u" , levelList:"listMuscleKg", levelRange:"resMuscleKg",},
		{ nameStr: "waterRate", text: "水分", unit: "", levelNum: "waterRate_u" , levelList:"listWaterRange", levelRange:"resWaterRange",},
		{ nameStr: "visceralFat", text: "内脏脂肪", unit: "", levelNum: "visceralFat_u" , levelList:"listFatRange", levelRange:"resFatRange",},
		{ nameStr: "visceralFatKg", text: "内脏脂肪量", unit: "", levelNum: "visceralFatKg_u" , levelList:"listFatRange", levelRange:"resFatRange",},
		{ nameStr: "boneRate", text: "骨率", unit: "(%)", levelNum: "boneRate_u" , levelList:"listBoneRange", levelRange:"resBoneRange",},
		{ nameStr: "boneKg", text: "骨量", unit: "", levelNum: "boneKg_u" , levelList:"listBoneRange", levelRange:"resBoneRange",},
		{ nameStr: "BMR", text: "基础代谢", unit: "", levelNum: "BMR_u" , levelList:"listbmrRange", levelRange:"resbmrRange",},
		{ nameStr: "proteinPercentageKg", text: "蛋白质", unit: "", levelNum: "proteinPercentageKg_u" , levelList:"listNutrition", levelRange:"resNutrition",},
		{ nameStr: "bodyAge", text: "身体年龄", unit: "", levelNum: "bodyAge_u", levelList:[0,50], levelRange:"resageRange ",},
		{ nameStr: "notFatWeight", text: "去脂体重", unit: "KG", levelNum: "notFatWeight_u" , levelList:"listbodyShape", levelRange:"resbodyShape",},
		{ nameStr: "obesityLevel", text: "肥胖等级", unit: "", levelNum: "obesityLevel_u" , levelList:"listobesity", levelRange:"resobesity",},
		{ nameStr: "fatRate", text: "脂肪率", unit: "(%)", levelNum: "fatRate_u" , levelList:"listFatRange", levelRange:"resFatRange",},
	  ]
	return (
		<>
			<div className="fl-c">
			<div className="dthead">
				<div>数据名称</div>
			</div>
			<div className="dtbody">
				<div className="fl-c">
					{tzData.map((item,index)=>
						<div key={'tzText_'+index}>{item.text+item.unit}</div>
					)}
				</div>
			</div>
			</div>
			{dbinfols.map((item,index)=>
			<div className="fl-c" key={item.id}>
				<div className="dthead">
					<div>{item.option_time == null ?"00:00:00":moment(parseInt(item.option_time)).format("MM月DD日 HH:mm")}</div>
				</div>
				<div className="dtbody">
					<div className="fl-c">
					{/* <div><WeightInfo weight={item.user_weight} weight_unit={item.user_weight_u}/></div> */}
					{tzData.map((tzitem,index)=>
						<div key={'tzData_'+index}>{parseFloat(item[tzitem.nameStr]).toFixed(2)}</div>
					)}
					</div>
				</div>
			</div>
			)}
		</>
	)
}
export const WeightInfo = ({weight,weight_unit}) =>{
	const wulist =["KG","LB","STLB","斤","g","lboz","oz","ml_water","ml_milk","fl_oz_water","fl_oz_milk","ST"]
	const weightData = forunit(weight,weight_unit)
	console.log(weightData)
	return (
		weightData.weight+"("+wulist[weightData.weight_unit]+")"
	)
}